import { useEffect, useState } from "react";
import "../../assets/sass/home_page/header/login_popup/login_popup.css";
import {
  CloseOutlined,
  WechatFilled,
  CodepenSquareFilled,
  MobileOutlined,
  MailFilled,
  WechatWorkFilled,
  DashOutlined,
  QqCircleFilled,
} from "@ant-design/icons";
import { Button, Form, Input, Select, Space, message } from "antd";
const LoginPopup = (props) => {
  useEffect(() => {
    (async () => {
      setLoginShow(props.sendLoginPopup.loginShow);
    })();
  }, [props]);

  const [loginShow, setLoginShow] = useState(true);
  const [scanCode, setScanCode] = useState(true);

  //关闭弹窗
  const close = () => {
    setLoginShow(false);
    props.click();
  };

  //切换微信扫码
  const changeWxCode = () => {
    setScanCode(true);
  };

  //切换App扫码
  const changeAppCode = () => {
    setScanCode(false);
  };

  const [changeType, setChangeType] = useState(true);
  //切换登录方式
  const changeLoginType = () => {
    if (changeType === false) {
      setChangeType(true);
    } else {
      setChangeType(false);
    }
  };

  const options = [
    {
      value: "+86",
      label: "+86",
    },
  ];

  //登录

  const onFinish = (values: { tel: any; pwd: any }) => {
    const { tel, pwd } = values;
    if (tel === "zas" && pwd === "123") {
      message.open({
        type: "success",
        content: "登录成功",
      });
      localStorage.setItem("username", tel);
      localStorage.setItem("token", "token");
      setTimeout(() => {
        setLoginShow(false);
        props.click();
      }, 1000);
    } else {
      message.open({
        type: "error",
        content: "手机号或密码错误",
      });
    }
  };
  return (
    <div
      className="login_popup"
      style={{ display: loginShow ? "block" : "none" }}
    >
      <div className="login_box">
        <div className="posters">
          <img src="/src/assets/image/home_page/header/login_popup/posters.jpg" />
        </div>
        <div className="boxc">
          <div className="change_type" onClick={changeLoginType}>
            <div className="type_box">
              <div className="change_btn">
                {changeType ? "手机号登录" : "微信扫码登录"}
              </div>
              <div className="change_img">
                <img
                  src={
                    changeType
                      ? "/src/assets/image/home_page/header/login_popup/tel.jpg"
                      : "/src/assets/image/home_page/header/login_popup/code.jpg"
                  }
                />
              </div>
            </div>
          </div>

          {changeType ? (
            <div className="boxc_main">
              <div className="change_code">
                <div
                  className={
                    scanCode ? "wx_code_login login_active" : "wx_code_login"
                  }
                  onClick={changeWxCode}
                >
                  <div>
                    <WechatFilled className="wx_icon" />
                    微信扫码登录
                  </div>
                </div>
                <div
                  className={
                    scanCode ? "app_code_login" : "app_code_login login_active"
                  }
                  onClick={changeAppCode}
                >
                  <div>
                    <CodepenSquareFilled className="app_icon" />
                    易企秀APP扫码登录
                  </div>
                </div>
              </div>
              <div className="main_text">
                {scanCode
                  ? "未注册的微信号将自动创建账号"
                  : "请使用易企秀APP扫码登录"}
              </div>
              <div className="code">
                <img
                  src={
                    scanCode
                      ? "/src/assets/image/home_page/header/login_popup/wx_code.jpg"
                      : "/src/assets/image/home_page/header/login_popup/app_code.jpg"
                  }
                />
              </div>
            </div>
          ) : (
            <div className="boxc_main_tel">
              <div className="title">手机密码登录</div>
              <Form
                name="normal_login"
                className="login_form"
                initialValues={{ remember: true }}
                onFinish={onFinish}
              >
                <Form.Item
                  className="tel_inp_box"
                  name="tel"
                  rules={[{ required: true, message: "请输入手机号" }]}
                >
                  <Space.Compact className="tel_space">
                    <Select
                      className="select_tel"
                      defaultValue="+86"
                      options={options}
                    />
                    <Input placeholder="请输入手机号" className="inp_tel" />
                  </Space.Compact>
                </Form.Item>
                <Form.Item
                  className="pwd_inp_box"
                  name="pwd"
                  rules={[{ required: true, message: "请输入密码" }]}
                >
                  <Input
                    type="password"
                    placeholder="请输入密码"
                    className="inp_pwd"
                  />
                </Form.Item>
                <Form.Item className="login_btn_box">
                  <Button
                    type="primary"
                    htmlType="submit"
                    className="login_btn"
                  >
                    登录
                  </Button>
                </Form.Item>
                <Form.Item className="login_tool">
                  <div className="tel_captcha_login">手机验证码登录</div>
                  <div className="forget_pwd">忘记密码</div>
                </Form.Item>
              </Form>
            </div>
          )}
          <div className="else_login">
            <div className="else_top">
              <div className="line"></div>
              <div className="else_top_text">其他登录方式</div>
              <div className="line"></div>
            </div>
            <div className="else_main">
              {changeType ? (
                <div className="tel_login" onClick={changeLoginType}>
                  <div className="icon">
                    <MobileOutlined />
                  </div>
                  <div className="login_text">手机号</div>
                </div>
              ) : (
                <div className="wx_login" onClick={changeLoginType}>
                  <div className="icon">
                    <WechatFilled />
                  </div>
                  <div className="login_text">微信扫码</div>
                </div>
              )}
              <div className="email_login">
                <div className="icon">
                  <MailFilled />
                </div>
                <div className="login_text">邮箱/用户名</div>
              </div>
              <div className="enterprise_wechant">
                <div className="icon">
                  <WechatWorkFilled />
                </div>
                <div className="login_text">企业微信</div>
              </div>
              <div className="qq">
                <div className="icon">
                  <QqCircleFilled />
                </div>
                <div className="login_text">QQ</div>
              </div>
              <div className="more">
                <div className="icon">
                  <DashOutlined />
                </div>
                <div className="login_text">更多</div>
              </div>
            </div>
          </div>
          <div className="text">
            <div className="text_text">
              您登录即同意易企秀<span>《用户服务协议》</span>
              <span>《隐私政策》</span>
              <span>《授权许可协议》</span>,如您成为易企秀会员，即视为同意
              <span>《会员服务协议》</span>
            </div>
            <div className="tel_enroll">手机号注册</div>
          </div>
        </div>
        <div className="close" onClick={close}>
          <CloseOutlined />
        </div>
      </div>
    </div>
  );
};

export default LoginPopup;
